<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>举报与推荐 - 社交平台</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        body {
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            background-color: #f5f7fa;
            color: #2d3748;
        }
        
        .nav-tabs .nav-link.active {
            color: #2563eb;
            border-bottom: 3px solid #2563eb;
            font-weight: 500;
        }
        
        .nav-tabs .nav-link {
            color: #64748b;
            border: none;
            padding: 0.75rem 1.5rem;
        }
        
        .content-card {
            transition: all 0.3s ease;
        }
        
        .content-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        
        .report-badge {
            position: absolute;
            top: 1rem;
            right: 1rem;
        }
        
        .image-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            gap: 5px;
        }
        
        .image-grid img {
            aspect-ratio: 1;
            object-fit: cover;
        }
        
        .interaction-bar {
            font-size: 0.875rem;
            color: #64748b;
        }
        
        .interaction-item {
            cursor: pointer;
            transition: color 0.2s;
        }
        
        .interaction-item:hover {
            color: #2563eb;
        }
        
        .recommendation-tag {
            background-color: rgba(34, 197, 94, 0.1);
            color: #166534;
            font-size: 0.75rem;
        }
        
        .report-reason {
            font-size: 0.875rem;
            background-color: rgba(239, 68, 68, 0.1);
            color: #dc2626;
        }
        
        .no-image-placeholder {
            background-color: #e2e8f0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #94a3b8;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm sticky-top">
        <div class="container">
            <a class="navbar-brand fw-bold text-primary" href="#">社交平台</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">发现</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="#">举报与推荐</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">消息</a>
                    </li>
                </ul>
                <div class="d-flex align-items-center gap-3">
                    <div class="search-box position-relative">
                        <input type="text" class="form-control form-control-sm rounded-pill" placeholder="搜索..." style="width: 180px; padding-left: 2rem;">
                        <i class="fas fa-search position-absolute left-3 top-50 transform -translate-y-1/2 text-muted"></i>
                    </div>
                    <img src="https://picsum.photos/id/1005/40/40" alt="用户头像" class="rounded-circle" width="36" height="36">
                </div>
            </div>
        </div>
    </nav>
    
    <!-- 主内容区 -->
    <div class="container py-6">
        <!-- 页面标题 -->
        <div class="mb-6">
            <h1 class="h2 mb-2">举报与推荐内容</h1>
            <p class="text-muted">浏览社区举报内容和推荐精选</p>
        </div>
        
        <!-- 内容分类标签 -->
        <div class="bg-white rounded-xl shadow-sm mb-6">
            <ul class="nav nav-tabs" id="contentTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="reports-tab" data-bs-toggle="tab" data-bs-target="#reports-content" type="button" role="tab">举报内容</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="recommendations-tab" data-bs-toggle="tab" data-bs-target="#recommendations-content" type="button" role="tab">推荐内容</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="handled-tab" data-bs-toggle="tab" data-bs-target="#handled-content" type="button" role="tab">已处理内容</button>
                </li>
            </ul>
            
            <!-- 内容区域 -->
            <div class="tab-content p-4" id="contentTabsContent">
                <!-- 举报内容 -->
                <div class="tab-pane fade show active" id="reports-content" role="tabpanel">
                    <div class="row gap-4">
                        <!-- 举报样式1：单张图片 -->
                        <div class="col-12 col-lg-6">
                            <div class="content-card bg-white rounded-xl shadow-sm overflow-hidden position-relative">
                                <span class="badge bg-danger report-badge">已举报</span>
                                <div class="row g-0">
                                    <div class="col-4">
                                        <img src="https://picsum.photos/id/1025/300/400" alt="举报内容图片" class="w-100 h-100 object-cover">
                                    </div>
                                    <div class="col-8 p-4">
                                        <div class="d-flex justify-content-between items-start mb-2">
                                            <h5 class="fw-semibold mb-0 line-clamp-1">不当言论内容举报</h5>
                                            <span class="text-xs text-muted">2小时前</span>
                                        </div>
                                        <p class="text-muted text-sm mb-3 line-clamp-2">该用户发布的内容包含不当言论，可能会引起争议和不良影响，特此举报。</p>
                                        
                                        <div class="d-flex items-center gap-2 mb-3">
                                            <img src="https://picsum.photos/id/1012/40/40" alt="作者头像" class="rounded-circle" width="32" height="32">
                                            <div>
                                                <div class="font-medium text-sm">用户ABC</div>
                                                <div class="text-xs text-muted">发布于 3天前</div>
                                            </div>
                                        </div>
                                        
                                        <div class="interaction-bar d-flex justify-content-between">
                                            <div class="d-flex gap-3">
                                                <div class="interaction-item d-flex align-items-center gap-1">
                                                    <i class="far fa-eye"></i>
                                                    <span>1.2k</span>
                                                </div>
                                                <div class="interaction-item d-flex align-items-center gap-1">
                                                    <i class="far fa-comment"></i>
                                                    <span>42</span>
                                                </div>
                                            </div>
                                            <div class="d-flex gap-3">
                                                <div class="interaction-item d-flex align-items-center gap-1">
                                                    <i class="far fa-heart"></i>
                                                    <span>89</span>
                                                </div>
                                                <div class="interaction-item d-flex align-items-center gap-1">
                                                    <i class="far fa-bookmark"></i>
                                                    <span>15</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 举报样式2：多张图片 -->
                        <div class="col-12 col-lg-6">
                            <div class="content-card bg-white rounded-xl shadow-sm p-4 position-relative">
                                <span class="badge bg-danger report-badge">已举报</span>
                                <h5 class="fw-semibold mb-3">疑似侵权内容举报</h5>
                                
                                <div class="image-grid mb-3">
                                    <img src="https://picsum.photos/id/1026/200/200" alt="侵权内容图片1" class="rounded">
                                    <img src="https://picsum.photos/id/1027/200/200" alt="侵权内容图片2" class="rounded">
                                    <img src="https://picsum.photos/id/1028/200/200" alt="侵权内容图片3" class="rounded">
                                    <div class="rounded bg-light d-flex items-center justify-content-center text-muted">+2</div>
                                </div>
                                
                                <p class="text-muted text-sm mb-3">该用户发布的图片集涉嫌侵犯版权，包含未经授权使用的商业图片，特此举报。</p>
                                
                                <div class="report-reason p-2 rounded mb-3">
                                    <div class="fw-medium mb-1">举报理由：</div>
                                    <div>侵犯知识产权，未经授权使用受版权保护的内容</div>
                                </div>
                                
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="d-flex items-center gap-2">
                                        <img src="https://picsum.photos/id/1025/40/40" alt="作者头像" class="rounded-circle" width="32" height="32">
                                        <div class="text-sm">
                                            <div class="font-medium">创意工作室</div>
                                            <div class="text-xs text-muted">浏览: 3.5k · 评论: 128</div>
                                        </div>
                                    </div>
                                    <div class="d-flex gap-2">
                                        <button class="btn btn-sm btn-outline-primary rounded-pill px-3">查看详情</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 举报样式3：无图片 -->
                        <div class="col-12">
                            <div class="content-card bg-white rounded-xl shadow-sm p-4 position-relative">
                                <span class="badge bg-danger report-badge">已举报</span>
                                <div class="d-flex gap-3">
                                    <div class="col-10">
                                        <h5 class="fw-semibold mb-2">骚扰性言论举报</h5>
                                        
                                        <div class="p-3 bg-gray-50 rounded mb-3 border border-gray-100">
                                            <p class="text-sm mb-0">"某些人就是不配使用这个平台，建议管理员永久封禁这类用户，简直是平台的耻辱..."</p>
                                        </div>
                                        
                                        <p class="text-muted text-sm mb-3">该用户在评论区发布骚扰性和攻击性言论，严重违反社区规定，影响其他用户体验。</p>
                                        
                                        <div class="d-flex items-center gap-2 mb-3">
                                            <img src="https://picsum.photos/id/1074/40/40" alt="作者头像" class="rounded-circle" width="32" height="32">
                                            <div>
                                                <div class="font-medium text-sm">网络用户X</div>
                                                <div class="text-xs text-muted">在《社区规范讨论》下评论 · 1天前</div>
                                            </div>
                                        </div>
                                        
                                        <div class="interaction-bar d-flex gap-4">
                                            <div class="interaction-item d-flex align-items-center gap-1">
                                                <i class="far fa-eye"></i>
                                                <span>5.7k 浏览</span>
                                            </div>
                                            <div class="interaction-item d-flex align-items-center gap-1">
                                                <i class="far fa-comment"></i>
                                                <span>215 评论</span>
                                            </div>
                                            <div class="interaction-item d-flex align-items-center gap-1">
                                                <i class="far fa-heart"></i>
                                                <span>328 点赞</span>
                                            </div>
                                            <div class="interaction-item d-flex align-items-center gap-1">
                                                <i class="far fa-bookmark"></i>
                                                <span>47 收藏</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-2 d-flex flex-column justify-end align-items-end gap-2">
                                        <button class="btn btn-sm btn-outline-primary rounded-pill px-3 w-100">处理记录</button>
                                        <button class="btn btn-sm btn-outline-secondary rounded-pill px-3 w-100">举报详情</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 举报样式4：视频内容 -->
                        <div class="col-12 col-lg-6">
                            <div class="content-card bg-white rounded-xl shadow-sm overflow-hidden position-relative">
                                <span class="badge bg-danger report-badge">已举报</span>
                                <div class="ratio ratio-16x9">
                                    <img src="https://picsum.photos/id/1035/800/450" alt="视频缩略图" class="w-100 h-100 object-cover">
                                    <div class="position-absolute top-50 left-50 translate-middle bg-black bg-opacity-50 text-white rounded-circle p-3">
                                        <i class="fas fa-play"></i>
                                    </div>
                                </div>
                                <div class="p-4">
                                    <h5 class="fw-semibold mb-2">不当视频内容举报</h5>
                                    <p class="text-muted text-sm mb-3">该视频包含不适合公开展示的内容，可能对青少年产生不良影响，建议审核处理。</p>
                                    
                                    <div class="report-reason p-2 rounded mb-3">
                                        <div class="fw-medium mb-1">举报理由：</div>
                                        <div>包含不适当内容，违反社区内容规范第5条</div>
                                    </div>
                                    
                                    <div class="d-flex justify-content-between items-center">
                                        <div class="d-flex items-center gap-2">
                                            <img src="https://picsum.photos/id/1066/40/40" alt="作者头像" class="rounded-circle" width="32" height="32">
                                            <div class="text-sm">
                                                <div class="font-medium">视频创作者Y</div>
                                                <div class="text-xs text-muted">发布于 2天前 · 播放: 8.2k</div>
                                            </div>
                                        </div>
                                        <div class="interaction-item d-flex align-items-center gap-1">
                                            <i class="far fa-comment"></i>
                                            <span>97</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 举报样式5：长文本内容 -->
                        <div class="col-12 col-lg-6">
                            <div class="content-card bg-white rounded-xl shadow-sm p-4 position-relative">
                                <span class="badge bg-danger report-badge">已举报</span>
                                <h5 class="fw-semibold mb-2">虚假信息内容举报</h5>
                                
                                <div class="no-image-placeholder rounded mb-3" style="height: 120px;">
                                    <i class="fas fa-file-alt fa-2x"></i>
                                </div>
                                
                                <p class="text-muted text-sm mb-3 line-clamp-3">该文章包含大量虚假信息和未经证实的内容，可能误导公众，传播不实消息，特此举报要求平台进行审核。文章中关于健康和医疗的建议缺乏科学依据，可能对读者造成误导...</p>
                                
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="d-flex items-center gap-2">
                                        <img src="https://picsum.photos/id/1077/40/40" alt="作者头像" class="rounded-circle" width="32" height="32">
                                        <div class="text-sm">
                                            <div class="font-medium">健康资讯</div>
                                            <div class="text-xs text-muted">阅读: 12.5k · 收藏: 83</div>
                                        </div>
                                    </div>
                                    <div class="d-flex gap-3">
                                        <div class="interaction-item d-flex align-items-center gap-1">
                                            <i class="far fa-thumbs-up"></i>
                                            <span>156</span>
                                        </div>
                                        <div class="interaction-item d-flex align-items-center gap-1">
                                            <i class="far fa-comment"></i>
                                            <span>213</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-6 text-center">
                        <button class="btn btn-outline-primary rounded-pill px-5">
                            加载更多举报内容
                        </button>
                    </div>
                </div>
                
                <!-- 推荐内容 -->
                <div class="tab-pane fade" id="recommendations-content" role="tabpanel">
                    <div class="row gap-4">
                        <!-- 推荐样式1：网格布局 -->
                        <div class="col-12 col-md-6 col-lg-4">
                            <div class="content-card bg-white rounded-xl shadow-sm overflow-hidden h-100">
                                <div class="position-relative">
                                    <img src="https://picsum.photos/id/1015/400/300" alt="推荐内容图片" class="w-100 aspect-[4/3] object-cover">
                                    <span class="badge recommendation-tag position-absolute top-2 right-2">社区精选</span>
                                </div>
                                <div class="p-4">
                                    <h5 class="fw-semibold mb-2 line-clamp-2">社区环保倡议活动回顾</h5>
                                    <p class="text-muted text-sm mb-3 line-clamp-2">上周末我们组织的社区环保活动取得了圆满成功，感谢所有参与者的支持与付出。</p>
                                    
                                    <div class="d-flex items-center gap-2 mb-3">
                                        <img src="https://picsum.photos/id/1001/40/40" alt="作者头像" class="rounded-circle" width="28" height="28">
                                        <span class="text-sm">社区管理员</span>
                                    </div>
                                    
                                    <div class="interaction-bar d-flex justify-content-between text-xs">
                                        <div class="d-flex gap-3">
                                            <div class="interaction-item d-flex align-items-center gap-1">
                                                <i class="far fa-eye"></i>
                                                <span>12.8k</span>
                                            </div>
                                            <div class="interaction-item d-flex align-items-center gap-1">
                                                <i class="far fa-heart"></i>
                                                <span>2.5k</span>
                                            </div>
                                        </div>
                                        <div class="d-flex gap-3">
                                            <div class="interaction-item d-flex align-items-center gap-1">
                                                <i class="far fa-comment"></i>
                                                <span>342</span>
                                            </div>
                                            <div class="interaction-item d-flex align-items-center gap-1">
                                                <i class="far fa-bookmark"></i>
                                                <span>517</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-12 col-md-6 col-lg-4">
                            <div class="content-card bg-white rounded-xl shadow-sm overflow-hidden h-100">
                                <div class="position-relative">
                                    <img src="https://picsum.photos/id/1016/400/300" alt="推荐内容图片" class="w-100 aspect-[4/3] object-cover">
                                    <span class="badge recommendation-tag position-absolute top-2 right-2">热门推荐</span>
                                </div>
                                <div class="p-4">
                                    <h5 class="fw-semibold mb-2 line-clamp-2">分享我的个人成长故事</h5>
                                    <p class="text-muted text-sm mb-3 line-clamp-2">从职场新人到部门主管，这五年我经历了哪些挑战与成长。</p>
                                    
                                    <div class="d-flex items-center gap-2 mb-3">
                                        <img src="https://picsum.photos/id/1002/40/40" alt="作者头像" class="rounded-circle" width="28" height="28">
                                        <span class="text-sm">职业规划师</span>
                                    </div>
                                    
                                    <div class="interaction-bar d-flex justify-content-between text-xs">
                                        <div class="d-flex gap-3">
                                            <div class="interaction-item d-flex align-items-center gap-1">
                                                <i class="far fa-eye"></i>
                                                <span>8.7k</span>
                                            </div>
                                            <div class="interaction-item d-flex align-items-center gap-1">
                                                <i class="far fa-heart"></i>
                                                <span>1.9k</span>
                                            </div>
                                        </div>
                                        <div class="d-flex gap-3">
                                            <div class="interaction-item d-flex align-items-center gap-1">
                                                <i class="far fa-comment"></i>
                                                <span>287</span>
                                            </div>
                                            <div class="interaction-item d-flex align-items-center gap-1">
                                                <i class="far fa-bookmark"></i>
                                                <span>423</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-12 col-md-6 col-lg-4">
                            <div class="content-card bg-white rounded-xl shadow-sm overflow-hidden h-100">
                                <div class="position-relative">
                                    <img src="https://picsum.photos/id/1018/400/300" alt="推荐内容图片" class="w-100 aspect-[4/3] object-cover">
                                    <span class="badge recommendation-tag position-absolute top-2 right-2">编辑推荐</span>
                                </div>
                                <div class="p-4">
                                    <h5 class="fw-semibold mb-2 line-clamp-2">手工制作教程：如何编织实用收纳篮</h5>
                                    <p class="text-muted text-sm mb-3 line-clamp-2">详细步骤教你制作美观又实用的手工收纳篮，环保又实用。</p>
                                    
                                    <div class="d-flex items-center gap-2 mb-3">
                                        <img src="https://picsum.photos/id/1003/40/40" alt="作者头像" class="rounded-circle" width="28" height="28">
                                        <span class="text-sm">手工达人</span>
                                    </div>
                                    
                                    <div class="interaction-bar d-flex justify-content-between text-xs">
                                        <div class="d-flex gap-3">
                                            <div class="interaction-item d-flex align-items-center gap-1">
                                                <i class="far fa-eye"></i>
                                                <span>6.3k</span>
                                            </div>
                                            <div class="interaction-item d-flex align-items-center gap-1">
                                                <i class="far fa-heart"></i>
                                                <span>1.2k</span>
                                            </div>
                                        </div>
                                        <div class="d-flex gap-3">
                                            <div class="interaction-item d-flex align-items-center gap-1">
                                                <i class="far fa-comment"></i>
                                                <span>156</span>
                                            </div>
                                            <div class="interaction-item d-flex align-items-center gap-1">
                                                <i class="far fa-bookmark"></i>
                                                <span>329</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 推荐样式2：大图布局 -->
                        <div class="col-12">
                            <div class="content-card bg-white rounded-xl shadow-sm overflow-hidden">
                                <div class="row g-0">
                                    <div class="col-12 col-lg-6">
                                        <img src="https://picsum.photos/id/1019/800/600" alt="精选推荐内容" class="w-100 h-100 object-cover">
                                    </div>
                                    <div class="col-12 col-lg-6 p-6">
                                        <div class="d-flex items-center gap-2 mb-3">
                                            <span class="badge recommendation-tag px-3 py-1">本周精选</span>
                                            <span class="text-muted text-sm">发布于 5天前</span>
                                        </div>
                                        
                                        <h3 class="fw-bold mb-3">年度社区影响力人物评选结果公布</h3>
                                        
                                        <p class="text-muted mb-4">经过为期一个月的社区投票和专家评审，我们终于确定了本年度社区影响力人物名单。这些优秀的社区成员通过他们的贡献和影响力，为社区带来了积极的变化和发展...</p>
                                        
                                        <div class="d-flex items-center gap-3 mb-5">
                                            <img src="https://picsum.photos/id/1005/60/60" alt="活动发起者头像" class="rounded-circle" width="48" height="48">
                                            <div>
                                                <div class="font-medium">社区运营团队</div>
                                                <div class="text-sm text-muted">官方账号 · 已认证</div>
                                            </div>
                                        </div>
                                        
                                        <div class="interaction-bar d-flex gap-5">
                                            <div class="interaction-item d-flex align-items-center gap-1">
                                                <i class="far fa-eye"></i>
                                                <span>24.5k 浏览</span>
                                            </div>
                                            <div class="interaction-item d-flex align-items-center gap-1">
                                                <i class="far fa-heart"></i>
                                                <span>5.7k 点赞</span>
                                            </div>
                                            <div class="interaction-item d-flex align-items-center gap-1">
                                                <i class="far fa-comment"></i>
                                                <span>892 评论</span>
                                            </div>
                                            <div class="interaction-item d-flex align-items-center gap-1">
                                                <i class="far fa-bookmark"></i>
                                                <span>1.2k 收藏</span>
                                            </div>
                                            <div class="interaction-item d-flex align-items-center gap-1">
                                                <i class="far fa-share-square"></i>
                                                <span>3.4k 分享</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 推荐样式3：列表布局 -->
                        <div class="col-12 col-lg-6">
                            <div class="content-card bg-white rounded-xl shadow-sm p-4">
                                <h5 class="fw-semibold mb-4">社区热门讨论话题</h5>
                                
                                <div class="space-y-4">
                                    <div class="d-flex gap-3 pb-3 border-bottom">
                                        <div class="flex-shrink-0">
                                            <img src="https://picsum.photos/id/1043/80/80" alt="话题图片" class="rounded" width="60" height="60">
                                        </div>
                                        <div class="flex-grow-1">
                                            <h6 class="font-medium mb-1">如何提高社区活跃度和互动性？</h6>
                                            <div class="text-sm text-muted mb-2">大家分享一下各自的经验和建议，共同建设更好的社区环境。</div>
                                            <div class="interaction-bar d-flex gap-3 text-xs">
                                                <div class="interaction-item d-flex align-items-center gap-1">
                                                    <i class="far fa-user"></i>
                                                    <span>328 人参与</span>
                                                </div>
                                                <div class="interaction-item d-flex align-items-center gap-1">
                                                    <i class="far fa-comment"></i>
                                                    <span>756 条回复</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="d-flex gap-3 pb-3 border-bottom">
                                        <div class="flex-shrink-0">
                                            <img src="https://picsum.photos/id/1044/80/80" alt="话题图片" class="rounded" width="60" height="60">
                                        </div>
                                        <div class="flex-grow-1">
                                            <h6 class="font-medium mb-1">分享你最常用的社区功能和使用技巧</h6>
                                            <div class="text-sm text-muted mb-2">发现社区隐藏功能，让使用体验更上一层楼。</div>
                                            <div class="interaction-bar d-flex gap-3 text-xs">
                                                <div class="interaction-item d-flex align-items-center gap-1">
                                                    <i class="far fa-user"></i>
                                                    <span>254 人参与</span>
                                                </div>
                                                <div class="interaction-item d-flex align-items-center gap-1">
                                                    <i class="far fa-comment"></i>
                                                    <span>512 条回复</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="d-flex gap-3">
                                        <div class="flex-shrink-0">
                                            <img src="https://picsum.photos/id/1045/80/80" alt="话题图片" class="rounded" width="60" height="60">
                                        </div>
                                        <div class="flex-grow-1">
                                            <h6 class="font-medium mb-1">社区未来发展方向征集意见</h6>
                                            <div class="text-sm text-muted mb-2">我们正在规划社区的新功能，欢迎大家提出宝贵建议。</div>
                                            <div class="interaction-bar d-flex gap-3 text-xs">
                                                <div class="interaction-item d-flex align-items-center gap-1">
                                                    <i class="far fa-user"></i>
                                                    <span>412 人参与</span>
                                                </div>
                                                <div class="interaction-item d-flex align-items-center gap-1">
                                                    <i class="far fa-comment"></i>
                                                    <span>937 条回复</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 推荐样式4：无图列表 -->
                        <div class="col-12 col-lg-6">
                            <div class="content-card bg-white rounded-xl shadow-sm p-4">
                                <h5 class="fw-semibold mb-4">优质文章推荐</h5>
                                
                                <div class="space-y-4">
                                    <div class="pb-3 border-bottom">
                                        <h6 class="font-medium mb-2">《社区规范解读：如何正确使用举报功能》</h6>
                                        <p class="text-sm text-muted mb-2 line-clamp-2">详细解读社区举报功能的使用场景和正确方法，帮助用户更好地维护社区环境。</p>
                                        
                                        <div class="d-flex justify-content-between items-center">
                                            <div class="d-flex items-center gap-2">
                                                <img src="https://picsum.photos/id/1006/40/40" alt="作者头像" class="rounded-circle" width="28" height="28">
                                                <span class="text-sm text-muted">社区管理团队</span>
                                            </div>
                                            <div class="interaction-bar d-flex gap-3 text-xs">
                                                <div class="interaction-item d-flex align-items-center gap-1">
                                                    <i class="far fa-eye"></i>
                                                    <span>3.2k</span>
                                                </div>
                                                <div class="interaction-item d-flex align-items-center gap-1">
                                                    <i class="far fa-heart"></i>
                                                    <span>542</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="pb-3 border-bottom">
                                        <h6 class="font-medium mb-2">《从举报到解决：社区内容审核流程揭秘》</h6>
                                        <p class="text-sm text-muted mb-2 line-clamp-2">揭秘社区内容从被举报到最终处理的完整流程，让用户了解平台如何维护社区秩序。</p>
                                        
                                        <div class="d-flex justify-content-between items-center">
                                            <div class="d-flex items-center gap-2">
                                                <img src="https://picsum.photos/id/1007/40/40" alt="作者头像" class="rounded-circle" width="28" height="28">
                                                <span class="text-sm text-muted">安全运营专员</span>
                                            </div>
                                            <div class="interaction-bar d-flex gap-3 text-xs">
                                                <div class="interaction-item d-flex align-items-center gap-1">
                                                    <i class="far fa-eye"></i>
                                                    <span>2.8k</span>
                                                </div>
                                                <div class="interaction-item d-flex align-items-center gap-1">
                                                    <i class="far fa-heart"></i>
                                                    <span>478</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div>
                                        <h6 class="font-medium mb-2">《共建和谐社区：优质内容创作指南》</h6>
                                        <p class="text-sm text-muted mb-2 line-clamp-2">分享如何创作符合社区规范的优质内容，提升内容曝光率和用户互动。</p>
                                        
                                        <div class="d-flex justify-content-between items-center">
                                            <div class="d-flex items-center gap-2">
                                                <img src="https://picsum.photos/id/1008/40/40" alt="作者头像" class="rounded-circle" width="28" height="28">
                                                <span class="text-sm text-muted">内容策划师</span>
                                            </div>
                                            <div class="interaction-bar d-flex gap-3 text-xs">
                                                <div class="interaction-item d-flex align-items-center gap-1">
                                                    <i class="far fa-eye"></i>
                                                    <span>4.5k</span>
                                                </div>
                                                <div class="interaction-item d-flex align-items-center gap-1">
                                                    <i class="far fa-heart"></i>
                                                    <span>892</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-6 text-center">
                        <button class="btn btn-outline-primary rounded-pill px-5">
                            发现更多推荐内容
                        </button>
                    </div>
                </div>
                
                <!-- 已处理内容 -->
                <div class="tab-pane fade" id="handled-content" role="tabpanel">
                    <div class="row gap-4">
                        <div class="col-12">
                            <div class="content-card bg-white rounded-xl shadow-sm p-4">
                                <div class="d-flex justify-content-between items-center mb-4">
                                    <h5 class="fw-semibold mb-0">不当言论内容 - 已处理</h5>
                                    <span class="badge bg-success">已删除</span>
                                </div>
                                
                                <div class="row gap-4">
                                    <div class="col-12 col-lg-8">
                                        <p class="text-muted mb-4">该内容包含违反社区规范的不当言论，经审核确认后已删除，发布者已被警告处理。</p>
                                        
                                        <div class="p-3 bg-gray-50 rounded mb-4 border border-gray-100">
                                            <p class="text-sm mb-0 italic">"已删除违规内容，包含人身攻击和不当言论"</p>
                                        </div>
                                        
                                        <div class="d-flex items-center gap-3 mb-4">
                                            <img src="https://picsum.photos/id/1012/40/40" alt="作者头像" class="rounded-circle" width="36" height="36">
                                            <div>
                                                <div class="font-medium">用户ABC</div>
                                                <div class="text-sm text-muted">处理时间: 2023-06-15 14:30</div>
                                            </div>
                                        </div>
                                        
                                        <div class="text-sm">
                                            <div class="fw-medium mb-1">处理结果：</div>
                                            <ul class="list-disc list-inside text-muted space-y-1">
                                                <li>违规内容已删除</li>
                                                <li>对发布者进行警告处理</li>
                                                <li>限制该用户24小时发言权限</li>
                                            </ul>
                                        </div>
                                    </div>
                                    
                                    <div class="col-12 col-lg-4">
                                        <div class="bg-gray-50 p-3 rounded h-100">
                                            <h6 class="font-medium mb-3">处理记录</h6>
                                            <div class="space-y-3 text-sm">
                                                <div>
                                                    <div class="text-muted">举报时间</div>
                                                    <div>2023-06-15 10:24</div>
                                                </div>
                                                <div>
                                                    <div class="text-muted">受理时间</div>
                                                    <div>2023-06-15 11:05</div>
                                                </div>
                                                <div>
                                                    <div class="text-muted">处理时间</div>
                                                    <div>2023-06-15 14:30</div>
                                                </div>
                                                <div>
                                                    <div class="text-muted">处理人员</div>
                                                    <div>社区审核员 - 张某某</div>
                                                </div>
                                                <div>
                                                    <div class="text-muted">处理依据</div>
                                                    <div>社区规范第3章第2条</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-12 col-lg-6">
                            <div class="content-card bg-white rounded-xl shadow-sm p-4">
                                <div class="d-flex justify-content-between items-center mb-3">
                                    <h5 class="fw-semibold mb-0">疑似侵权内容 - 已处理</h5>
                                    <span class="badge bg-warning">已屏蔽</span>
                                </div>
                                
                                <div class="image-grid mb-3">
                                    <img src="https://picsum.photos/id/1026/200/200" alt="已处理内容图片1" class="rounded opacity-50">
                                    <img src="https://picsum.photos/id/1027/200/200" alt="已处理内容图片2" class="rounded opacity-50">
                                    <div class="rounded bg-light d-flex items-center justify-content-center text-muted opacity-50">+3</div>
                                </div>
                                
                                <p class="text-muted text-sm mb-3">该内容被举报涉嫌侵犯知识产权，经审核后确认侵权，已对内容进行屏蔽处理，并通知发布者。</p>
                                
                                <div class="d-flex justify-content-between items-center">
                                    <div class="d-flex items-center gap-2">
                                        <img src="https://picsum.photos/id/1025/40/40" alt="作者头像" class="rounded-circle" width="32" height="32">
                                        <div class="text-sm">
                                            <div class="font-medium">创意工作室</div>
                                            <div class="text-xs text-muted">处理于 3天前</div>
                                        </div>
                                    </div>
                                    <button class="btn btn-sm btn-outline-primary rounded-pill px-3">查看完整记录</button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-12 col-lg-6">
                            <div class="content-card bg-white rounded-xl shadow-sm p-4">
                                <div class="d-flex justify-content-between items-center mb-3">
                                    <h5 class="fw-semibold mb-0">骚扰性言论 - 已处理</h5>
                                    <span class="badge bg-success">已处理</span>
                                </div>
                                
                                <div class="no-image-placeholder rounded mb-3" style="height: 120px;">
                                    <i class="fas fa-comment-slash fa-2x"></i>
                                </div>
                                
                                <p class="text-muted text-sm mb-3">经审核，举报内容属实，已删除相关骚扰性言论，并对发布者进行禁言7天的处罚。</p>
                                
                                <div class="d-flex justify-content-between items-center">
                                    <div class="d-flex items-center gap-2">
                                        <img src="https://picsum.photos/id/1074/40/40" alt="作者头像" class="rounded-circle" width="32" height="32">
                                        <div class="text-sm">
                                            <div class="font-medium">网络用户X</div>
                                            <div class="text-xs text-muted">处理于 5天前</div>
                                        </div>
                                    </div>
                                    <button class="btn btn-sm btn-outline-primary rounded-pill px-3">查看完整记录</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-6 text-center">
                        <button class="btn btn-outline-primary rounded-pill px-5">
                            查看更多处理记录
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 页脚 -->
    <footer class="bg-white py-6 mt-8 border-top">
        <div class="container">
            <div class="text-center text-muted">
                <p class="mb-2">© 2023 社交平台 版权所有</p>
                <p class="text-sm">关于我们 | 使用条款 | 隐私政策 | 帮助中心 | 举报中心</p>
            </div>
        </div>
    </footer>
    
    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 交互功能实现
        document.addEventListener('DOMContentLoaded', function() {
            // 点赞功能
            document.querySelectorAll('.interaction-item .far.fa-heart, .interaction-item .far.fa-thumbs-up').forEach(icon => {
                icon.addEventListener('click', function(e) {
                    e.stopPropagation();
                    this.classList.toggle('far');
                    this.classList.toggle('fas');
                    this.classList.toggle('text-red-500');
                    
                    // 更新数字
                    const countElement = this.nextElementSibling;
                    let count = parseInt(countElement.textContent);
                    count = this.classList.contains('fas') ? count + 1 : count - 1;
                    countElement.textContent = count;
                });
            });
            
            // 收藏功能
            document.querySelectorAll('.interaction-item .far.fa-bookmark').forEach(icon => {
                icon.addEventListener('click', function(e) {
                    e.stopPropagation();
                    this.classList.toggle('far');
                    this.classList.toggle('fas');
                    this.classList.toggle('text-blue-500');
                    
                    // 更新数字
                    const countElement = this.nextElementSibling;
                    let count = parseInt(countElement.textContent);
                    count = this.classList.contains('fas') ? count + 1 : count - 1;
                    countElement.textContent = count;
                });
            });
            
            // 加载更多按钮动画
            document.querySelectorAll('.btn-outline-primary').forEach(btn => {
                if (btn.textContent.includes('加载更多') || btn.textContent.includes('查看更多') || btn.textContent.includes('发现更多')) {
                    btn.addEventListener('click', function() {
                        this.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span> 加载中...';
                        
                        // 模拟加载延迟
                        setTimeout(() => {
                            this.innerHTML = btn.textContent;
                            // 实际应用中这里会加载并添加新内容
                        }, 1500);
                    });
                }
            });
        });
    </script>
</body>
</html>
    
